<template>
  <div>
      <Title title="人员新增"></Title>
      <el-row>
          <el-col :span="6">
              <el-form 
                  ref="formRef" 
                  :model="form" 
                  status-icon 
                  :rules="rules" 
                  label-width="120px" 
                  label-position="top"
                  class="myform">
                  <el-form-item label="用户名" prop="username">
                      <el-input  clearable v-model="form.username" placeholder="用户名" 
                          type="text" autocomplete="off" />
                  </el-form-item>
                  <el-form-item label="手机号" prop="phone">
                      <el-input  clearable v-model="form.phone" placeholder="手机号" 
                          type="text" autocomplete="off" />
                  </el-form-item>
                  <el-form-item label="密码" prop="password">
                      <el-input  disabled  v-model="form.password" placeholder="密码" 
                          type="text" autocomplete="off" />
                  </el-form-item>
                  <el-form-item v-if="userInfo" label="用户身份" prop="role">
                      <el-select v-model="form.role" class="m-2" style="width:100%;" placeholder="用户身份" size="default">
                          <el-option
                          v-for="item in roleList"
                              :key="item.value"
                              :label="item.label"
                              :value="item.value"
                              :disabled="userInfo.role<=item.value"   
                          />
                      </el-select>
                  </el-form-item>
                  <el-form-item>
                      <el-button type="primary" class="btnblock" @click=submitData()>添加</el-button>
                      <el-button type="danger" class="btnblock" @click="resetForm()">重置</el-button>
                  </el-form-item>
              </el-form>
          </el-col>
      </el-row>
  </div>
</template>
<!-- userinfo和rolelist都是main主页请求到 -->
<script lang="ts" setup>
import {ref, reactive, watch} from 'vue'
import {useStore} from '@/store' 
import { computed } from '@vue/reactivity';
import {reg } from '@/utils/validate'
import { ShowErrorMsg } from '../../utils';
import { Ajax } from '@/api';
import { useRouter } from 'vue-router';

const router = useRouter()
const formRef = ref()
const rules = reactive({
  username: [
      {
          required: true,
          message: '请输入用户名',
          trigger: 'blur',
      },
  ],
  phone:[
      {
          required: true,
          message: '请输入手机号',
          trigger: 'blur',
      },
      {
          pattern:reg.phone,
          message: '请输入正确格式的手机号码',
          trigger: 'blur',
      }
  ],
  password:[
      {
          required: true,
          message: '请输入密码',
          trigger: 'blur',
      },
      {
          pattern:reg.pwd,
          message: '请输入6-16位的数字和字母组合的密码',
          trigger: 'blur',
      }
  ],
  role:[
      {
          required: true,
          message: '请选择身份',
          trigger: 'change',
      },
  ]
})
const store = useStore()
const form = ref<any>({})
const roleList = computed(()=>store.roleList )
const userInfo = computed(()=>store.userInfo)
const resetForm = ()=>{
  formRef.value.resetFields()
}

watch(form,(v)=>{
  console.log(v)
  if(reg.phone.test(v.phone)){
      form.value.password = 'wh'+  v.phone.slice(7,11);//生成用户的密码
  }
},{
  deep:true // 深度监听 
})

const submitData =  ()=>{
  formRef.value.validate(async (valid:boolean)=>{
      if(valid){
          let res:any = await Ajax.useradd(form.value)
          if(res.code==200){
              router.push({name:'user-list'})
          }
      }else{
          ShowErrorMsg('校验失败')
      }
  })
}
</script>